<div>
  <div class="panel panel-default">
    <div
      class="panel-heading clickable"
      data-toggle="collapse"
      data-target="#J_Setting_Meta"
    >
      <h4 class="panel-title">{{Kooboo.text.component.pageEditor.htmlMeta}}</h4>
    </div>
    <div id="J_Setting_Meta" class="panel-collapse collapse">
      <ul class="list-group">
        <template v-for="($data,index) in metaList">
          <li v-if="index==0" class="list-group-item">
            <strong>Current page</strong>
          </li>
          <li :key="index" class="list-group-item">
            <a
              href="javascript:;"
              v-kb-tooltip:top="Kooboo.text.common.remove"
              @click="remove($data)"
              class="btn gray btn-xs pull-right margin-right-5"
            >
              <i class="fa fa-minus"></i>
            </a>
            <a
              href="javascript:;"
              class="btn blue btn-xs pull-right"
              v-kb-tooltip:top="Kooboo.text.common.edit"
              @click="edit($data)"
            >
              <i class="fa fa-pencil"></i>
            </a>
            <span class="nowrap-text">{{$data.displayText}}</span>
          </li>
        </template>
      </ul>
      <div class="panel-body">
        <button @click="createMeta" class="btn blue btn-xs pull-right">
          <i class="fa fa-plus"></i>
        </button>
      </div>
    </div>
  </div>
</div>
